<template>
  <div class="login-page" :style="{ backgroundImage: `url(${loginPageBg})` }">
    <!-- 修改远程服务地址和端口 -->
    <div @click="showProductInfo=true">
      <el-icon name="menu" @click="showProductInfo=true"  ></el-icon>
    </div>
    <el-dialog
      :modal="false"
      :visible.sync="showProductInfo"
      title="修改服务地址">
      <el-form :model="productInfoEditForm" label-width="100px">
        <el-form-item label="ip地址">
          <el-input v-model="productInfoEditForm.ip"></el-input>
        </el-form-item>
        <el-form-item label="端口号">
          <el-input v-model="productInfoEditForm.port"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showProductInfo = false">取 消</el-button>
        <el-button type="primary" @click="updateProductInfo" :loading="productInfoLoading">确 定</el-button>
      </span>
    </el-dialog>

    <div class="main">
      <div class="header">
        <div class="header-center fl">
          <div class="header-title">欢迎登录{{productInfo.componay}}智能网关</div>
          <!-- <div class="header-title">SF-IFMS 智慧机电运营系统</div> -->
          <!-- <div class="header-title">SF-IoTS 智联云综合平台</div> -->
          <div
            class="header-img"
            :style="{ backgroundImage: `url(${headerImgBg})` }"
          ></div>
        </div>
        <div class="header-bottom fl"></div>
      </div>

      <div class="content">
        <div
          class="content-left"
          :style="{ backgroundImage: `url(${contentLeftBg})` }"
        >
          <!--<img src="images/d.png" alt="">-->
        </div>
        <div
          class="content-right"
          :style="{ backgroundImage: `url(${contentRightBg})` }"
        >
          <el-form
            class="right-infp"
            :model="loginForm"
            ref="login-form"
            @submit.native.prevent
          >
            <el-form-item
              prop="account"
              class="right-infp-name"
              :style="{ backgroundImage: `url(${iptBg})` }"
            >
              <input
                type="text"
                name="user"
                placeholder="请输入用户名"
                maxlength="20"
                required
                v-model="loginForm.account"
                auto-complete="new-pwd"
              />
            </el-form-item>
            <el-form-item
              prop="pwd"
              class="right-infp-name"
              :style="{ backgroundImage: `url(${iptBg})` }"
            >
              <input
                v-model="loginForm.pwd"
                type="pwd"
                maxlength="20"
                placeholder="请输入密码"
                auto-complete="new-pwd"
              />
            </el-form-item>
            <el-form-item
              class="right-infp-btn"
              :style="{ backgroundImage: `url(${btnBg})` }"
            >
              <button class="btn" :disabled="disabled" @click="handleLogin('login-form')">
                登 录
              </button>
                <el-button type="text" :disabled="disabled"  class="btn modify"  @click="modifyPwd()">
                修改密码 >>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <el-dialog
      :modal="false"
      :visible.sync="showModifyPwd"
      title="修改密码">
      <el-form :model="user" label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="user.user"></el-input>
        </el-form-item>
        <el-form-item label="旧密码">
          <el-input v-model="user.oldPwd"></el-input>
        </el-form-item>
          <el-form-item label="新密码">
          <el-input v-model="user.newPwd"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showModifyPwd = false">取 消</el-button>
        <el-button type="primary" @click="confirmModifyPwd" :loading="modifyPwdLoading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import storage from '@/util/storage' // 导入核心工具库
import { loginApi, sysParamsApi } from '@/api/common.js' 
import { getProductInfoApi, updateProductInfoApi } from '@/api/product-info.js' 
import md5 from 'js-md5'
export default {
  name: 'login-page',
  data () {
    return {
      loginForm: {
        account: 'admin',
        pwd: 'pwd'
      }, // 登陆表单
      loginPageBg: require('../assets/login/bj.jpg').default,
      headerImgBg: require('../assets/login/head.gif').default,
      contentLeftBg: require('../assets/login/d.png').default,
      contentRightBg: require('../assets/login/e.png').default,
      iptBg: require('../assets/login/b.png').default,
      btnBg: require('../assets/login/a.png').default,
      htmlDom: null,
      user: {
        user: '',
        oldPwd: '',
        newPwd: ''
      },
      showModifyPwd: false,
      modifyPwdLoading: false,
      disabled: false,
      productInfo: {},
      showProductInfo: false,
      productInfoEditForm: {}, 
      productInfoLoading: false,
    }
  },
  mounted () {
    this.htmlDom = document.querySelector('html')
    this.myOnresize()
    window.addEventListener('resize', this.myOnresize)
    this.getProductInfo();
  },
  methods: {
    getProductInfo(){
      getProductInfoApi().then(res=>{
        if(res.code == 0) {
          this.disabled = false;
          this.productInfo = res.data;
          this.productInfoEditForm = res.data;
          this.$store.dispatch('SET_PRODUCT_INFO', res.data);
        }
      })
    },
    updateProductInfo(row){
      this.productInfoLoading = true;
      updateProductInfoApi(row).then(res => {
        this.productInfoLoading = false;
        if(res.data == 0){
          this.$message({type: 'success', message: '更新服务地址成功'})
        }
      })
    },
    // size change listen
    myOnresize () {
      const windowWidth = document.body.clientWidth
      this.htmlDom.style.fontSize = windowWidth / 24 + 'px'
    },
    // 登陆逻辑
    async handleLogin (name) {
      // 登录表单验证
      const _va_login = await this.loginValidate(name)
      // 验证通过调用登陆接口
      if (!_va_login) return
      this.loginSubmit()
    },
    // 登陆表单验证
    loginValidate (formName) {
      return new Promise((resolve) => {
        this.$refs[formName].validate((valid) => {
          resolve(valid)
        })
      })
    },
    // 登陆表单提交
    async loginSubmit () {
      const data = {
        user: this.loginForm.account,
        pwd: md5(this.loginForm.pwd)
      }
      const res = await loginApi(data);
      if(res.code != 0) return;
      storage.local.set('token', 'ccd4d007-d227-4a80-9d1f-f45fe0147e98')

      if(res.data.isAdmin){
        this.getSysParams();
      }else{
        this.$router.push('/gateway')
      }

    },
    getSysParams(){
      sysParamsApi().then( res => {
        if(res.code != 0) return;
        this.$store.dispatch('SET_SYS_PARAMS', res.data)
        this.$router.push('/gateway')
      })
    },
    modifyPwd(){
      this.showModifyPwd = true;
      this.user = {};
    },
    confirmModifyPwd(){
      this.modifyPwdLoading = true;
    },

  },
  beforeDestroy () {
    window.removeEventListener('resize', this.myOnresize)
  }
}
</script>

<style lang="scss">

.login-page {
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 0.16rem;
  color: #ffffff;
  position: fixed;
  width: 100%;
  height: 100%;

  div .el-icon-menu {
    position: absolute;
    right: 0.3rem;
    top: 0.2rem;
    font-size: 0.3rem;
    z-index: 100;
  }
}
.main {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 1.6rem;
}

.header .header-center {
  width: 50%;
  height: 1.2rem;
  position: relative;
  margin: 0 auto;
}
.header .header-center .header-title {
  text-align: center;
  color: #ffffff;
  font-size: 0.4rem;
  text-shadow: 0 0 0.3rem #00d8ff;
  line-height: 1.05rem;
}
.header .header-img {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0.8rem;
}

.content {
  width: 12rem;
  height: 7rem;
  margin: 1rem auto 0 auto;
}
.content .content-left {
  width: 6.2rem;
  height: 5.8rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.4rem 0;
  box-sizing: border-box;
  margin-right: 2%;
  float: left;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

.content .content-left {
  -webkit-transform: rotate(360deg);
  animation: rotation 15s linear infinite;
  -moz-animation: rotation 15s linear infinite;
  -webkit-animation: rotation 15s linear infinite;
  -o-animation: rotation 15s linear infinite;
}

.content .content-right {
  width: 5.4rem;
  height: 5.8rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: right;
  position: relative;
}
.right-infp {
  width: 4rem;
  height: 3rem;
  margin: auto auto;
  vertical-align: center;
  position: absolute;
  top: 1.6rem;
  left: 0.9rem;
}
.right-infp-name {
  background-repeat: no-repeat;
  width: 100%;
  height: 0.5rem;
  background-size: 100% 100%;
  line-height: 0.45rem;
  margin-bottom: 0.4rem;
  position: relative;
}
.right-infp-name input {
  width: 85%;
  border: none;
  box-sizing: border-box;
  height: 0.5rem;
  margin-left: 0.5rem;
  line-height: 0.4rem;
  background: none !important;
  color: #00eaff;
  padding-left: 0.15rem;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
  position: absolute;
}
input::-webkit-input-placeholder {
  color: #ccc;
}
input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
input {
  -webkit-text-fill-color: #00eaff; //颜色是设置成你需要的颜色
}
.right-infp-btn {
  width: 100%;
  height: 0.5rem;
  background-size: 100% 100%;
  line-height: 0.5rem;
  margin-bottom: 0.4rem;
  position: relative;
}
.right-infp-btn .btn {
  width: 95%;
  border: none;
  box-sizing: border-box;
  height: 0.45rem;
  margin-left: 0.1rem;
  font-size: 0.22rem;
  cursor: pointer;
  background: none;
  outline: none;
  color: #00eaff;
  position: absolute;
}
.modify{
  bottom: -1.5rem;
  right: -1rem;
}
</style>
